iT邦幫忙

2024 iThome 鐵人賽
DAY 28
0
JavaScript

Javascript網頁程式管理系統系列 第 28 篇

day 28 Javascript結合line bot時事推薦股票網頁程式管理系統

16th鐵人賽
65 瀏覽

  • 分享至 

  • xImage
    •  

今天是第二十八天我們可以寫一個javascript結合line bot時事推薦股票網頁程式管理系統，以下是我的程式碼

  1. LINE Bot 接收用戶訊息，回應時事股票推薦。
  2. 網頁管理界面允許系統管理員設置推薦的股票和時事新聞源。
  3. 使用第三方股票 API 獲取即時股票數據，並根據設定條件進行推薦。

系統架構

  • 後端：Node.js、Express.js
  • LINE Bot：使用 LINE Messaging API
  • 前端：HTML、CSS、JavaScript
  • 資料庫：MongoDB 或 MySQL 來儲存股票推薦規則和時事資訊

1. 後端（Node.js 和 LINE Bot）

在這裡，我們首先撰寫一個 Node.js 程式來連接 LINE Messaging API，並透過 API 來處理用戶的請求。

安裝依賴套件

npm init -y
npm install express @line/bot-sdk axios

server.js 範例程式碼

const express = require('express');
const { Client } = require('@line/bot-sdk');
const axios = require('axios');

const app = express();
const port = 3000;

// LINE Messaging API 設定
const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

// 建立 LINE Bot 客戶端
const client = new Client(config);

// 設定 LINE Bot Webhook
app.post('/webhook', express.json(), (req, res) => {
  const events = req.body.events;
  Promise.all(events.map(handleEvent)).then((result) => res.json(result));
});

// 處理來自 LINE 的訊息事件
function handleEvent(event) {
  if (event.type === 'message' && event.message.type === 'text') {
    const userMessage = event.message.text;

    // 假設用戶發送"股票"字樣，我們推薦一支股票
    if (userMessage.includes('股票')) {
      return getStockRecommendation()
        .then((stockInfo) => {
          return client.replyMessage(event.replyToken, {
            type: 'text',
            text: `推薦股票: ${stockInfo.symbol}, 當前價格: ${stockInfo.price}`
          });
        });
    }
  }

  return Promise.resolve(null);
}

// 從股票 API 獲取股票資訊
function getStockRecommendation() {
  const stockApiUrl = 'https://api.example.com/stock/recommendation';  // 替換成實際股票API的網址
  return axios.get(stockApiUrl)
    .then((response) => {
      const stockData = response.data;
      return {
        symbol: stockData.symbol,
        price: stockData.price
      };
    })
    .catch((error) => {
      console.error('Error fetching stock data:', error);
      return { symbol: 'N/A', price: 'N/A' };
    });
}

// 啟動伺服器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

LINE Bot 設定

  1. 前往 LINE Developers 創建 Messaging API Channel。
  2. 將 channelAccessToken 和 channelSecret 輸入到程式中。
  3. 將 Webhook URL 設定為你的伺服器地址，例如：https://your-server-url/webhook。

2. 前端管理頁面 (HTML + JavaScript)

管理者可以透過網頁介面設定要推薦的股票及時事新聞。

index.html 範例程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票推薦管理系統</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f0f0f0; }
    .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; }
    h1 { text-align: center; }
    label { display: block; margin-top: 10px; }
    input, select { width: 100%; padding: 10px; margin-top: 5px; }
    button { margin-top: 15px; padding: 10px; width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <h1>股票推薦管理系統</h1>
    <label for="stock-symbol">股票代碼:</label>
    <input type="text" id="stock-symbol" placeholder="輸入股票代碼">

    <label for="news-source">時事新聞來源:</label>
    <select id="news-source">
      <option value="source1">新聞來源1</option>
      <option value="source2">新聞來源2</option>
    </select>

    <button onclick="submitSettings()">提交設定</button>
  </div>

  <script>
    function submitSettings() {
      const stockSymbol = document.getElementById('stock-symbol').value;
      const newsSource = document.getElementById('news-source').value;

      fetch('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ stockSymbol, newsSource })
      })
      .then(response => response.json())
      .then(data => {
        alert('設定已更新!');
      })
      .catch(error => {
        console.error('Error updating settings:', error);
      });
    }
  </script>
</body>
</html>

後端管理設定處理 (server.js 部分)

app.post('/api/settings', (req, res) => {
  const { stockSymbol, newsSource } = req.body;
  // 儲存設定 (可以存入資料庫)
  console.log('股票代碼:', stockSymbol, '新聞來源:', newsSource);
  res.json({ message: '設定已更新' });
});

3. 股票及新聞 API

你可以使用以下 API 獲取即時股票數據和新聞：

我可以將 API 整合進管理系統和 LINE Bot 來提供實時推薦。

1. 後端程式碼 (Node.js 和 LINE Bot)

這段程式碼負責處理 LINE Bot 的訊息，並與股票 API 互動以提供推薦股票資訊。

引入必要的模組

const express = require('express');
const { Client } = require('@line/bot-sdk');
const axios = require('axios');
  • express: 用來建立一個 HTTP 伺服器，處理 Webhook 請求。
  • @line/bot-sdk: LINE Bot 的套件，處理來自 LINE 的訊息事件。
  • axios: 用來發送 HTTP 請求，這裡用來調用第三方 API（例如股票 API）。

建立 Express 應用和設定 LINE Messaging API

const app = express();
const port = 3000;

const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

const client = new Client(config);
  • app: 是一個 Express 應用。
  • config: 包含 LINE Bot 的必要參數。channelAccessToken 和 channelSecret 是從 LINE Developers 平台獲得的憑證，用來認證並與 LINE 進行溝通。
  • client: 是 LINE Bot SDK 中的客戶端，用來處理從 LINE 接收和發送訊息的功能。

接收並處理來自 LINE 的 Webhook

app.post('/webhook', express.json(), (req, res) => {
  const events = req.body.events;
  Promise.all(events.map(handleEvent)).then((result) => res.json(result));
});
  • 當用戶在 LINE 中發送訊息時，LINE 會透過 Webhook 向你的伺服器發送一個 POST 請求。這段程式碼使用 app.post('/webhook') 來接收 Webhook 請求。
  • events 包含用戶與 LINE Bot 的互動事件，每一個事件都被 handleEvent 函數處理。

處理 LINE Bot 訊息的函數

function handleEvent(event) {
  if (event.type === 'message' && event.message.type === 'text') {
    const userMessage = event.message.text;

    if (userMessage.includes('股票')) {
      return getStockRecommendation()
        .then((stockInfo) => {
          return client.replyMessage(event.replyToken, {
            type: 'text',
            text: `推薦股票: ${stockInfo.symbol}, 當前價格: ${stockInfo.price}`
          });
        });
    }
  }

  return Promise.resolve(null);
}
  • handleEvent 用來處理 LINE Bot 收到的訊息。當事件是「訊息事件」且類型是文字訊息時，這段程式會檢查用戶的文字訊息內容。
  • 假如訊息中包含關鍵字 "股票"，則會呼叫 getStockRecommendation() 函數獲取推薦股票資訊，並用 client.replyMessage 回應用戶。

獲取股票推薦的函數

function getStockRecommendation() {
  const stockApiUrl = 'https://api.example.com/stock/recommendation';  // 替換成實際股票API的網址
  return axios.get(stockApiUrl)
    .then((response) => {
      const stockData = response.data;
      return {
        symbol: stockData.symbol,
        price: stockData.price
      };
    })
    .catch((error) => {
      console.error('Error fetching stock data:', error);
      return { symbol: 'N/A', price: 'N/A' };
    });
}
  • getStockRecommendation 函數負責從股票 API 獲取推薦股票的數據。這裡使用 axios 發送 HTTP 請求到一個假設的股票 API 。
  • response.data 包含 API 回應的數據，該函數會返回股票代碼 (symbol) 和價格 (price)。
  • 如果獲取數據失敗（例如 API 出現錯誤），則會返回預設值 N/A。

啟動伺服器

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
  • app.listen 啟動 Express 伺服器並監聽指定的埠 (3000)。伺服器啟動後，會顯示 Server is running on http://localhost:3000。

2. 前端管理頁面 (HTML + JavaScript)

這段 HTML 和 JavaScript 讓管理者可以透過網頁設定推薦的股票和時事新聞。

HTML 結構

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票推薦管理系統</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f0f0f0; }
    .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; }
    h1 { text-align: center; }
    label { display: block; margin-top: 10px; }
    input, select { width: 100%; padding: 10px; margin-top: 5px; }
    button { margin-top: 15px; padding: 10px; width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <h1>股票推薦管理系統</h1>
    <label for="stock-symbol">股票代碼:</label>
    <input type="text" id="stock-symbol" placeholder="輸入股票代碼">

    <label for="news-source">時事新聞來源:</label>
    <select id="news-source">
      <option value="source1">新聞來源1</option>
      <option value="source2">新聞來源2</option>
    </select>

    <button onclick="submitSettings()">提交設定</button>
  </div>
  • HTML 建立了一個簡單的管理介面，提供輸入框讓管理者輸入股票代碼和選擇新聞來源，還有一個提交按鈕。

JavaScript 提交設定

  <script>
    function submitSettings() {
      const stockSymbol = document.getElementById('stock-symbol').value;
      const newsSource = document.getElementById('news-source').value;

      fetch('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ stockSymbol, newsSource })
      })
      .then(response => response.json())
      .then(data => {
        alert('設定已更新!');
      })
      .catch(error => {
        console.error('Error updating settings:', error);
      });
    }
  </script>
</body>
</html>
  • submitSettings 函數負責提交股票代碼和新聞來源到伺服器。這裡使用 fetch 方法，將數據發送到伺服器的 /api/settings 路徑，並以 JSON 格式傳遞。
  • 成功提交後，會顯示提示訊息 設定已更新。

3. 後端處理設定請求

伺服器接收來自前端的設定請求並更新系統。

app.post('/api/settings', (req, res) => {
  const { stockSymbol, newsSource } = req.body;
  // 儲存設定 (可以存入資料庫)
  console.log('股票代碼:', stockSymbol, '新聞來源:', newsSource);
  res.json({ message: '設定已更新' });
});
  • 當前端提交股票和新聞來源時，伺服器會接收這些數據並進行處理。
  • 這裡只是簡單地將接收到的設定打印到控制台，但實際上可以將這些設定儲存到資料庫中。

總結：

  • 後端部分：使用 Node.js、Express 和 LINE Bot SDK 來處理 LINE Bot 的訊息並調用股票 API。
  • 前端部分：簡單的管理頁面，用來設定推薦的股票和新聞來源，提交後由後端進行儲存或處理。

上一篇
day 27 javascript社交工程演練網頁程式管理系統
下一篇
day 29 javascript結合line分析地價成長空間網頁程式管理系統
系列文
Javascript網頁程式管理系統 共 30 篇
  1. 26
    day 26 javascript有機蔬菜認證網頁程式管理系統
  2. 27
    day 27 javascript社交工程演練網頁程式管理系統
  3. 28
    day 28 Javascript結合line bot時事推薦股票網頁程式管理系統
  4. 29
    day 29 javascript結合line分析地價成長空間網頁程式管理系統
  5. 30
    day 30 javascript腳踏車路線紀錄分享給車友網頁程式管理系統
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22082 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙